<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="status_bar"></view>
		<myTopBar title="监管会议" url='../../static/index/button_an.png'></myTopBar>

		<view class="content">
			<view class="content1">
				<!-- 日期选择 -->
				<view class="content1-date">
					<view class="center-right-">
						<view class="center-right">
							<view class="center-right-inputSelect">
								<text>日期：</text>
								<input @click="chooseDate" disabled type="text" v-model="data" />
								<view class="center-right-inputSelect-icon" @click="visible=false,chooseIndex=0">
									<u-icon color='#58B6E5' :name='visible?"arrow-up-fill":"arrow-down-fill"'></u-icon>
								</view>
							</view>
						</view>
						<picker-view @click="visible=false,chooseIndex=0" v-if="visible" :value="value"
							@change="bindChange" class="picker-view">
							<picker-view-column>
								<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>

				<!-- 时间查询 -->
				<!-- <view class="center-right-">
					<view class="center-right">
						<view @click="chooseTime" class="center-right-inputSelect">
							<text>时间：</text>
							<input disabled type="text" v-model="time" />
							<view class="center-right-inputSelect-icon">
								<u-icon color='#58B6E5' :name='visibleTime?"arrow-up-fill":"arrow-down-fill"'>
								</u-icon>
							</view>
						</view>
					</view>
					<picker-view @click="visibleTime=false,chooseIndex=0" v-if="visibleTime" :value="valueTime"
						@change="bindChangeTime" class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in hours" :key="index">{{item}}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in seconds" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>
				</view> -->
				<view @click="toSearch" class="center-right-btn">查询</view>
			</view>
			<!-- 内容 -->
			<view class="content2">
				<view class="content2-title" v-for="item,index in meetingData">
					<view class="content2Title">会议日期：<text>{{item.meetingDate}}</text></view>
					<view class="content2Title">参会人：<text>{{item.participants}}</text></view>
					<view class="content2Title">会议记录：</view>
					<view class="conten2MettingRecord">
						{{item.meetingRecord}}
					</view>
				</view>
				<u-empty icon-size='50' img-width='150' font-size="15" v-if="meetingData.length===0" text="数据为空" ></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import myTopBar from '../topNavigationBar/topNavigationBar'
	export default {
		components: {
			myTopBar
		},
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 2000; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			// const hours = []
			// const minutes = []
			// const hour = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours()
			// const minute = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
			// const seconds = []
			// const second = date.getSeconds() < 10 ? ('0' + date.getseconds()) : date.getSeconds()
			// for (let i = 1; i < 24; i++) {
			// 	hours.push(i)
			// }
			// for (let i = 1; i < 60; i++) {
			// 	minutes.push(i)
			// }
			// for (let i = 1; i < 60; i++) {
			// 	seconds.push(i)
			// }
			return {
				background: {
					backgroundColor: '#2169D3'
				},
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				visible: false,
				clickFlag: false,
				// hours,
				// hour,
				// minutes,
				// minute,
				// seconds,
				// second,
				// visibleTime: false,
				// valueTime: [hour - 1, minute - 1, second],
				// clickTimeFlag: false,
				chooseIndex: 0,
				dateFlage: false,
				meetingData: []
			}
		},
		computed: {
			data() {
				if (this.clickFlag) {
					return this.year + '年' + this.month + '月' + this.day + '日'
				} else {
					return ''
				}
			},
			// time() {
			// 	if (this.clickTimeFlag) {
			// 		return this.hour + '：' + this.minute + '：' + this.second
			// 	} else {
			// 		return ''
			// 	}
			// },
		},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			bindChange: function(e) {
				console.log(e.detail.value);
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
				this.dateFlage = true
			},
			// bindChangeTime(e) {
			// 	console.log(e.detail.value);
			// 	this.hour = e.detail.value[0] + 1
			// 	this.minute = e.detail.value[1] + 1
			// 	this.second = e.detail.value[2] + 1
			// },
			chooseDate() {
				if (this.chooseIndex === 0) {
					this.visible = true;
					this.clickFlag = true
					this.chooseIndex = 1
				}
			},
			// chooseTime() {
			// 	if (this.chooseIndex === 0) {
			// 		this.visibleTime = true;
			// 		this.clickTimeFlag = true
			// 		this.chooseIndex = 1
			// 	}
			// },
			/* 查询会议记录 */
			async selectMeeting() {
				let day;
				if (this.month < 10) {
					if (this.day < 10) {
						day = this.year + "-0" + this.month + "-0" + this.day
					} else {
						day = this.year + "-0" + this.month + "-" + this.day
					}
				} else {
					if (this.day < 10) {
						day = this.year + "-" + this.month + "-0" + this.day
					} else {
						day = this.year + "-" + this.month + "-" + this.day
					}
				}
				const res = await this.$u.api.selectMeeting({
					day: day
				})
				if(!res.success){
					return
				}
				this.meetingData = res.body.data
				console.log(this.meetingData);
			},
			toSearch() {
				if (!this.dateFlage) {
					this.$u.toast('请先选择时间！')
					return;
				}
				this.selectMeeting()
			}
		},

	}
</script>

<style>
	page {
		background-color: #2169D3;
		overflow: hidden;
	}

	/* 顶部导航栏 */
	/* 手机系统 系统状态栏高度 */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #2169D3;
	}

	/* content */
	.content {
		display: flex;
		padding-top: 20rpx;
	}

	/* 日期选择 */
	.content1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 38rpx;
	}

	.center-right {
		display: flex;
		margin: 10rpx 20rpx;
	}

	.center-right-inputSelect {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #58B6E5;
		width: 180rpx;
		height: 30rpx;
		border: 2rpx solid #000000;
		font-size: 16rpx;
		color: #FFFFFF;
		margin-right: 5rpx;
	}

	.center-right-inputSelect input {
		width: 120rpx;
		border-bottom: 3rpx solid #FFFFFF;
		margin-top: 0rpx;
		font-size: 13rpx;
		color: #034AB2;
	}

	.center-right-inputSelect-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 8rpx;
		width: 20rpx;
		height: 16rpx;
		background-color: #FFFFFF;
		border: 1rpx dashed #000000;
	}

	.picker-view {
		position: absolute;
		z-index: 999;
		width: 140rpx;
		height: 120rpx;
		margin-left: 24rpx;
		font-size: 14rpx;
		background-color: #ACC4E6;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.center-right-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 85rpx;
		height: 30rpx;
		color: #FFFFFF;
		font-size: 16rpx;
		background-color: #58B6E5;
		border: 2rpx solid #000000;
		border-radius: 10rpx;
	}

	.content2 {
		width: 400rpx;
		height: 200rpx;
		/* height: 50%; */
		background-color: #FFFFFF;
		font-size: 15rpx;
		padding: 10rpx;
		white-space: nowrap;
		overflow-y: auto;
	}

	.content2-title {
		margin-bottom: 40rpx;
	}

	.content2Title {
		font-weight: 700;
		margin-bottom: 20rpx;
	}

	.content2Title text {
		font-weight: 400
	}

	.conten2MettingRecord {
		white-space: normal;
		word-wrap: break-word;
		text-indent :1em;
		line-height: 30rpx;
	}
</style>
